<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:c="http://java.sun.com/jstl/core"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
<ui:composition template="../../templates/layout.xhtml">
	<ui:define name="content">
		<h2>Felhasználók</h2>

		<h:form id="form">
			<p:dataTable var="user" value="#{usersBean.lazyModel}"
				paginator="true" rows="10" styleClass="tablestyle"
				paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
				rowsPerPageTemplate="5,10,15" selectionMode="single"
				selection="#{usersBean.selectedUser}" id="userTable" lazy="true">
				<p:ajax event="rowSelect" listener="#{usersBean.onRowSelect}"
					update=":form :userDetail" />
				<p:column headerText="Name" sortBy="#{user.username}"
					filterBy="#{user.username}">
					<h:outputText value="#{user.username}" />
				</p:column>

				<p:column headerText="FirstName" sortBy="#{user.firstName}"
					filterBy="#{user.firstName}">
					<h:outputText value="#{user.firstName}" />
				</p:column>

				<p:column headerText="LastName" sortBy="#{user.lastName}"
					filterBy="#{user.lastName}">
					<h:outputText value="#{user.lastName}" />
				</p:column>
				<p:column headerText="Roles" sortBy="#{user.roles}"
					filterBy="#{user.roles}">
					<h:outputText value="#{user.roles}" />
				</p:column>

			</p:dataTable>
			<h:panelGrid columns="2" cellpadding="5">
				<p:commandButton styleClass="formbutton" id="deleteButton"
					value="Törlés" disabled="#{usersBean.selectedUser == null}"
					action="#{usersBean.deleteUser}" update="form" />
				<p:commandButton value="Módosítás" type="button"
					styleClass="formbutton"
					disabled="#{usersBean.selectedUser == null}"
					onclick="PF('userDialog').show();" />
			</h:panelGrid>

		</h:form>

		<p:dialog header="User Details" widgetVar="userDialog" modal="true"
			showEffect="fade" hideEffect="fade" resizable="false">
			<p:outputPanel id="userDetail" style="text-align:center;">
				<h:form>
					<p:panelGrid columns="2"
						rendered="#{usersBean.selectedUser != null}"
						columnClasses="label,value">

						<h:outputText value="Name" />
						<h:outputText value="#{usersBean.selectedUser.username}" />

						<h:outputText value="Roles" />
						<p:selectManyCheckbox id="grid" value="#{usersBean.selectedRoles}"
							valueChangeListener="#{usersBean.selectedItemsChanged}" 
							layout="grid" columns="3">
							<f:selectItems value="#{usersBean.roles}" var="role"
								itemLabel="#{role.role}" itemValue="#{role.id}" />
								 <p:ajax event="valueChange" immediate="true" process="@this" update=":form"/>
						</p:selectManyCheckbox>



					</p:panelGrid>
				</h:form>
			</p:outputPanel>
		</p:dialog>
	</ui:define>
</ui:composition>
</html>